<template>
  <div class="card flex-col">
    <div class="card-title">{{ obj.tit }}</div>
    <div class="card-count">{{ totalNum }}</div>
    <div class="card-increase">本月新增 {{ monthNum }}</div>
    <slot />
    <el-table
      :data="list"
      style="width: 100%"
      max-height="280"
      class="card-table"
    >
      <el-table-column
        v-if="obj.one"
        show-overflow-tooltip
        prop="address"
        :label="obj.one"
      >
        <template slot-scope="scope">
          <span class="real-estate" @click="handleClick(scope.row.id)">
            {{ scope.row.address }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="obj.two"
        prop="two"
        :label="obj.two"
        width="100"
        align="center"
      />
      <el-table-column
        v-if="obj.three"
        prop="three"
        align="center"
        :label="obj.three"
        width="100"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
    },
    datas: {
      list: {
        type: Array,
        default: [],
      },
      totalNum: Number,
      monthNum: Number,
      default: () => {
        return {
          totalNum: 0,
          monthNum: 0,
          list: [],
        };
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    list() {
      return this.datas.list;
    },
    totalNum() {
      return this.datas.totalNum;
    },
    monthNum() {
      return this.datas.monthNum;
    },
  },
  methods: {
    handleClick(id) {
      this.$emit("toDetail", id);
    },
  },
};
</script>
<style lang="scss">
.card-table {
  & thead {
    color: #010101;
  }
}
</style>

<style lang="scss" scoped>
.card {
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid rgba(221, 221, 221, 100);
  min-height: 492px;
  position: relative;
}

.card-title {
  color: #414141;
  font-size: 16px;
  text-align: left;
  font-weight: bold;
}

.card-count {
  margin-top: 27px;
  color: #414141;
  font-size: 36px;
  font-weight: bold;
}

.card-increase {
  margin: 10px auto 56px;
  color: #414141;
  font-size: 16px;
}

.table-address {
  cursor: pointer;
  position: relative;
  margin: 0;
  color: #4e7afb;
  max-height: 40px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.real-estate {
  color: #4e7afb;
  cursor: pointer;
}
</style>
